<template>
  <div id="background">
    <div class="formContainer">
      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="rules"
        class="loginForm"
      >
        <h3 class="title" style="text-align: center;margin-bottom:2rem">掌上菜单管理系统</h3>
        <el-form-item prop="phone">
          <el-input
            v-model="loginForm.phone"
            prefix-icon="el-icon-user-solid"
            type="text"
            placeholder="请输入电话"
            clearable
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            prefix-icon="el-icon-lock"
            type="password"
            placeholder="请输入密码"
            autocomplete="new-password"
            clearable
          />
        </el-form-item>

        <div class="btns">
          <div>
            <el-button class="login" :loading="loading" type="primary" @click="handleLogin" >登录</el-button>
          </div>
          <div>
            <el-button class="reset" type="primary" @click="resetForm('loginForm')" >重置</el-button>
          </div>

        </div>
        <el-form-item class="tips">
          <div class="forget">
            <router-link :to="{ name: 'changePass' }">忘记密码</router-link>
          </div>
          <div class="regist">
            <router-link :to="{ name: 'registerIndex' }">注册</router-link>
          </div>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
import { getWbeRoot } from '../../api/web-site'
import axios from 'axios'
import sessionStorage from '../../assets/js/storage'

export default {
  name: 'Login',
  data () {
    return {
      loginForm: {
        phone: '',
        password: ''
      },

      rules: {
        phone: [{ required: true, message: '请输入电话', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      passwordType: 'password',
      loading: false
    }
  },

  methods: {
    handleLogin () {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          const param = {
            phone: this.loginForm.phone,
            password: this.loginForm.password
          }
          axios({
            url: getWbeRoot() + 'api/login/userLogin',
            method: 'post',
            data: param
          }).then(
            response => {
              const data = response.data.data
              sessionStorage.setItem('usrId', data.id)
              sessionStorage.setItem('roleName', data.username)
              sessionStorage.setItem('qrUrl', data.qrUrl)
              this.$router.push('/variety-of-dishes-manage')
            },
            error => {
              console.log(error.message)
            }
          )
        } else {
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style scoped>
#background {
  background: url("../../assets/images/12345.jpeg") no-repeat center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
a {
  text-decoration: none;
  color: aliceblue;
}
.formContainer{
    width: 20rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
      background: rgba(0,0,0,.3);
      padding: 2rem;
}
.loginForm{

}
.btns{
}
.login,.reset{
  width: 100%;
  margin: 0;
  margin-bottom: 10px;
}
.
.router-link-active {
  text-decoration: none;
}
.forget,
.regist,.menuList {
  display: inline-block;
  width: 6rem;
}
.tips{
}
.formContainer{

}
</style>
